<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>服务详情</title>
    <link rel="stylesheet" href="../../common/css/vant-index.css" />
    <style rel="stylesheet">
        body {
            background-color: #fff;
        }

        a {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        a:-webkit-any-link {
            color: #eee;
        }

        hr {
            height: 0.4rem;
            background-color: #F5F5F5;
            border: none
        }

        .item {
            display: flex;
            flex-direction: column;
            margin: 0.5rem;
            padding: 0.2rem;
        }


        .top__details {
            display: flex;
            align-items: center;
        }

        .left__img {
            position: relative;
        }

        .divider {
            width: 3%;
            height: auto;
        }

        .right__details span {
            color: #000000A6;
            font-size: 0.9rem;
            display: block;
            margin-top: 0.2rem;
            margin-bottom: 0.2rem;
        }

        .bottom__details {
            color: #000000A6;
            margin: 0.3rem;
        }

        .bottom__details span {
            font-size: 0.8rem;
        }

        .van-tabs__line {
            background: #01CD9C;
        }

        .sub__container {
            display: flex;
            flex-direction: column;
            padding: 1rem 0.5rem 0.5rem 0.5rem;
        }

        .step {
            display: flex;
            /*height: 5rem;*/
        }

        .round__line {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .round {
            background-color: #F0F0F0;
            width: 0.6rem;
            height: 0.6rem;
            border-radius: 50%;
        }

        .line {
            flex: 1;
            background-color: #F0F0F0;
            height: 100%;
            width: 0.1rem;
        }

        .finish {
            background: no-repeat center/100% url('../img/hMService/finish.png');
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            /*margin-top: 0.3rem;*/
        }

        .unfinish {
            background: no-repeat center/100% url('../img/hMService/unfinish.png');
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            /*margin-top: 0.3rem;*/
        }

        .info {
            flex: 1;
            margin: -0.4rem 0.3rem 0 0.5rem;
            padding-bottom: 0.8rem;
        }

        .info__event {
            color: #000000D9;
            font-size: 0.9rem;
            letter-spacing: 0.1rem;
            margin: 0 0 0.4rem 0;
        }

        .info__executor {
            font-size: 0.8rem;
            color: #000000A6;
            margin-bottom: 0.35rem;
        }

        .info__score {
            font-size: 0.8rem;
            color: #000000A6;
        }

        .popout {
            margin: 1rem;
            display: flex;
            flex-direction: column;
        }

        .service__time {
            margin-bottom: 0.6rem;
        }

        .service__name {
            margin-bottom: 1rem;
        }

        .executor__name {
            margin-bottom: 0.6rem;
        }

        .remark {
            display: flex;
            align-items: flex-start;
        }

        .remark__input {
            display: flex;
            align-items: flex-end;
        }

        textarea {
            padding: 10px;
            max-width: 100%;
            line-height: 1.5;
            border-radius: 5px;
            border: 1px solid #ccc;
            box-shadow: 1px 1px 1px #999;
            margin-left: 0.25rem;
            margin-right: 0.5rem;
        }

        .tag1,
        .tag2,
        .tag3 {
            position: absolute;
            z-index: 10;
            font-size: 0.75rem;
            border-radius: 5px 0 5px 0;
            padding: 0 0.2rem 0 0.2rem;
			top: -1px;
			left: -1px;
        }

        .tag1 {
            color: #E22E30;
            background-color: #FFFFFF;
        }

        .tag2 {
            color: #fff;
            background-color: #E22E30;
        }

        /*.tag3 {
            background-color: #F5F4F5;
            color: #999899;
        }*/

        img {
            width: 8rem;
            height: 6rem;
        }

        @media screen and (max-width: 280px) {
            span {
                font-size: 4vw;
            }

            img {
                width: 36vw;
                height: 27vw;
            }

            .info__score,
            .info__executor,
            .info__event,
            .item {
                font-size: 3vw;
            }

            #tag {
                top: 0.14rem;
            }

            .tag1,
            .tag2,
            .tag3 {
                border-radius: 2px 0 5px 0;
            }
        }
        .tagList span{
        		display: inline-block;
	        	padding: 5px 10px;
	        	color: rgba(0, 0, 0, 0.4);
	        	background: #F3F3F3;
			border-radius: 4px;
			margin-right: 8px;
			margin-bottom: 10px;
			font-size: 13px;
			border: 1px solid #F3F3F3;
        }
        .tagList span.onevaltag{
        		border-color: #01CD9C;
        		background: none;
        		color: #01CD9C;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="container">
            <van-nav-bar v-if='from=="patient"' :title="title" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
                <template #right>
                    <van-icon name="wap-home-o" size="18" />
                </template>
            </van-nav-bar>

            <!-- <div v-if="flag == false">
                <van-empty description="当前没有服务记录" />
            </div> -->

            <div v-if="flag == true&&ShowPage">
                <div class="item">
                    <div class="top__details">
                        <div class="left__img">
                            <span class="tag1" v-show="status == 1">服务中</span>
                            <span class="tag2" v-show="status == 2">待服务</span>
                            <span class="tag1" v-show="status == 3">已结束</span>
                            <img :src="basicInfo.servicePhoto" />
                        </div>

                        <div class="divider"></div>

                        <div class="right__details">
                            <span>客户名称：{{basicInfo.clientName}}</span>
                            <span>医生：{{basicInfo.doctorName}}</span>
                            <span>营养师：{{basicInfo.dietician}}</span>
                            <span>健康管理师：{{basicInfo.healthManager}}</span>
                        </div>
                    </div>
                    <div class="bottom__details">
                        <span>有效期：{{basicInfo.validPeriod}}</span>
                    </div>
                </div>

                <hr />

                <van-tabs @click-tab="callback" v-model:active="defaultStart" lazy-rander="false">
                    <van-tab v-for="(item,index) in totalServiceItems" :key="item.time.period" :name="item.time.period"
                        :title="item.time.period">
                        <div class="sub__container">
                            <div class="step" v-for="(record, pos) in item.serviceItems" :key="pos" @click="setFinish(record.status,record.dataId, record.serviceName,record.remark)">
                                <div class="round__line">
                                    <div class="round"></div>
                                    <div v-if="pos != item.serviceItems.length - 1" class="line"></div>
                                </div>
                                <div class="info">
                                    <div class="info__event" v-if="record.serviceName != null">
                                        {{record.serviceName}}
                                    </div>
                                    <div class="info__executor" v-if='record.status!=0'>
                                        执行人： {{record.executor}}
                                    </div>
                                    <div class="info__score" v-if='record.status!=0'>
                                        <span v-if="!record.score&&from=='patient'">服务已完成,<text @click='setEvalution(record.dataId)' style='color:#01CD9C;margin-left:3px;'>点此进行服务评价</text></span>
                                        <span v-if="!record.score&&from=='doctor'">患者未评价</span>
                                        <div v-if='record.score'>
                                        		<div class="">
                                        			<span v-if="from=='patient'">我的评价：</span>
                                        			<span v-else>患者评价：</span>
	                                            	<van-rate v-model="record.score" readonly :size="14" color="#ffd21e"
	                                                void-icon="star" void-color="#eee" disabled-color="#ffd21e" />
	                                        	</div>
                                            	<div v-if="record.tagName" style="margin-top: 8px;">
                                            		<span>
	                                            		<van-tag v-for='item in record.tagName' color='#01CD9C' plain type="primary" style='margin-right: 5px;margin-bottom: 5px;font-size: 11px;'>{{item}}</van-tag>
	                                            	</span>
                                            	</div>
                                        	</div>
                                        

                                    </div>
                                </div>
                                <div v-if="record.status == 1" class="finish"></div>
                                <div v-if="record.status == 0" class="unfinish"></div>
                            </div>
                        </div>
                    </van-tab>
                    <!--更新状态弹窗-->
                    <van-popup v-model:show="show" position="bottom" :style="{ height: '40%' }" closeable @close='close'>
                        <div class="popout">
                            <div class="service__time">服务时间： {{serviceTime}}</div>
                            <div class="service__name">服务项目： {{serviceName}}</div>
                            <!-- <div class="executor__name">执行人: 有和</div> -->
                            <div class="remark">
                                <span>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</span>
                                <div class="remark__input">
                                    <textarea v-if="serviceStatus==0" v-model="remark" placeholder="备注限制为30字内" rows="3" maxlength="30"></textarea>
                                    <textarea v-if='serviceStatus!=0' disabled v-model="serviceRemark" rows="3" maxlength="30"></textarea>
                                    <span>{{remark.length}}/30</span>
                                </div>
                            </div>
                            <br />
                            <br />
                            <van-button color="#01CD9C" v-if='serviceStatus==0' round size="small" @click="updateStatus" style='margin-bottom:25px;'>更新状态</van-button>
                        </div>
                    </van-popup>
                		
                		<!--患者添加评价弹窗-->
                		<van-popup v-model:show="evalShow" position="bottom" round  closeable @close='close'>
                        <div class="">
                        		<p style="text-align: center;">请对本次服务打分</p>
                        		<div style="text-align: center;padding: 20px;">
                        			<van-rate v-model="evalValue" :size='30' color="#01CD9C" void-icon="star" void-color="#eee" @change="onEvalChange" />
                        		</div>
                        		<div class="tagList" v-if="tagList" style="padding:0 20px 20px 20px;margin-bottom: 20px;">
                        			<span :key='item.tagId' :class="{'onevaltag':onTagList.indexOf(item.tagId)>-1}" v-for="item in tagList" @click="onTagChange(item.tagId,item.tagName)">{{item.tagName}}</span>
                        		</div>
                        		<van-button color="#01CD9C" round size="large" @click="setEval" style='margin-bottom:25px;'>提交</van-button>
                        </div>
                    </van-popup>
                </van-tabs>
            </div>
        </div>
    </div>
</body>
<!-- 上线环境用 -->
<script src="../../common/js/vue.global.prod.js"></script>
<!-- 引入 UI 组件库 -->
<script src="../../common/js/vant.min.js"></script>
<!-- axios 接口调用 -->
<script src="../../common/js/axios.min.js"></script><script src="../../base.js"></script>
<script src="../../common/js/url.min.js"></script>

<script type="module">
    import {
        getAction,
        postAction,
        getUrl,
        spliceUrl
    } from "../../common/js/api/vue3-axios-utils.js";

    const PatientData = {
        data() {
            return {
                url: {
                    getServiceDetails: '/107/03/1070315',
                    setServiceStatus: '/107/03/1070318',
                    getEvalTags:'/tag/list',
                    setEval:'/107/03/1070320'
                },
                flag: false,
                currentData: {},
                basicInfo: {},
                totalServiceItems: {},
                title: '',
                status: -1,
                show: false,
                serviceTime: '',
                serviceName: '',
                serviceStatus:0,
                remark: '',
                serviceItemId: -1,
                defaultStart: '',
                evalShow:false,
                evalValue:0,
                tagshow:false,
                tagList:[],
                onTagList:[],
                onTagNameList:[],
                ShowPage:false
            };
        },
        created() {
        		if(url('?userid')){
        			this.pid = url('?userid')
        		}else{
        			this.pid = localStorage.pid
        		}
        		if(url('?from')){
        			this.from = url('?from')
        		}
        		
        		this.packageid = url('?packageid')
        		this.init()
        },
        mounted() {
            if (localStorage.serviceTitle) {
                this.title = localStorage.serviceTitle;
            }
            if (localStorage.status) {
                this.status = localStorage.status;
            }
        },
        methods: {
        		async init () {
	            	await this.getData()
	        	},
            getData() {
                const transform = (str) => {
                    let tStrObject = new Date(Date.parse(str.replace('年', '-').replace('月', '-').replace('日', '')));
                    let goodStr = `${tStrObject.getFullYear()}/${tStrObject.getMonth() + 1}/${tStrObject.getDate()}`;
                    return goodStr;
                }

                let patientId = this.pid;
                let packageId = this.packageid;
                postAction(spliceUrl(this.url.getServiceDetails),{patientId: patientId,packageId: packageId}).then((res)=>{
            			res = res.data
            			if(res.success){
            				this.ShowPage = true
            				this.flag = true;
							this.currentData = res.result
							this.status=res.result.basicInfo.serviceStatus
							this.basicInfo = this.currentData.basicInfo;
							let dateArr = this.basicInfo.validPeriod.split("-")
							let startStr = transform(dateArr[0]);
							let endStr = transform(dateArr[1]);
							let fullStr = `${startStr}~${endStr}`
							this.basicInfo.fullStr = fullStr;
							this.totalServiceItems = this.currentData.totalServiceItems;
							this.serviceTime = this.currentData.defaultPeriod;
							this.defaultStart = this.currentData.defaultPeriod;
							document.title= this.basicInfo.serviceName
            			}else{
            			}
            		})
            },
            onClickLeft() {
                window.location.href = "../hMService.html?userid=" + this.pid+'&from='+this.from;
            },
            onClickRight() {
                window.location.href =
                    "../index.html?userid=" + this.pid;
            },
            callback({ title }) {
                console.log(title);
                this.serviceTime = title;
            }
            ,
            setFinish(status,dataId, serviceName,remark) {
            		if(this.from=='patient'){
            			this.show = false
            		}else{
            			this.show = true;
		            	this.serviceItemId = dataId;
			        	this.serviceName = serviceName;
			        	this.serviceStatus = status;
			        	this.serviceRemark = remark;
            		}
            	},
            
            setEvalution:function(id){
            		this.evalShow = true
            		this.serviceItemId = id;
            },
            
            onEvalChange(value) {
            		console.log('vaalue',value)
		    		this.evalValue = value
		    		if(value<=3){
		    			this.getEvalTags()
		    		}else{
		    			this.tagList = []
		    			this.onTagList = []
		    			this.onTagNameList = []
		    		}
		    },
            
            close() {
            		this.show = false;
		    		this.evalShow = false
		        this.evalValue = 0
		    		this.onTagList = []
		    		this.onTagNameList = []
		    		this.tagList=[]
		    		this.remark=''
		    },
            updateStatus() {
				var doctorid = url('?doctorId')
            		postAction(spliceUrl(this.url.setServiceStatus),{remark: this.remark,serviceItemId: this.serviceItemId,type: 1,doctorId:doctorid}).then((res)=>{
            			res = res.data
            			if(res.success){
            				this.show = false;
            				this.totalServiceItems.forEach((val,index,arr) => {
            					val.serviceItems.forEach((v,idx,arr1) => {
            						if(this.serviceItemId==v.dataId){
            							this.totalServiceItems[index].serviceItems[idx].status=1
            						}
            					})
            				})
            				//this.getData()
            			}else{
            			}
            		})
            },
            getEvalTags(){
            		postAction(spliceUrl(this.url.getEvalTags),{tagType: 43}).then((res)=>{
            			res = res.data
            			if(res.success){
            				console.log('res',res.result)
            				this.tagList = res.result
            			}else{
            			}
            		})
            },
            onTagChange(id,name){
            		let arrIndex = this.onTagList.indexOf(id);
            		let arrName = this.onTagList.indexOf(name);
		        if (arrIndex > -1){
		          this.onTagList.splice(arrIndex,1)
		          this.onTagNameList.splice(arrName,1)
		        }else{
		          this.onTagList.push(id)
		          this.onTagNameList.push(name)
		        }
           	},
           	setEval(){
           		if(this.evalValue){
           			if(this.evalValue>3||this.onTagList!=''){
	           			postAction(spliceUrl(this.url.setEval),{tagIds:this.onTagList,serviceItemId:this.serviceItemId,evaluation:this.evalValue}).then((res)=>{
		            			res = res.data
		            			if(res.success){
		            				console.log('res',res.result)
		            				this.totalServiceItems.forEach((val,index,arr) => {
		            					val.serviceItems.forEach((v,idx,arr1) => {
		            						if(this.serviceItemId==v.dataId){
		            							this.totalServiceItems[index].serviceItems[idx].score=this.evalValue
		            							this.totalServiceItems[index].serviceItems[idx].tagName=this.onTagNameList
		            						}
		            					})
		            				})
		            				this.evalShow = false
		            				this.evalValue = 0
		            				this.onTagList = []
		            				this.onTagNameList = []
		            				
		            				//this.getData()
		            			}else{
		            			}
		            		})
	           		}else{
	           			this.$toast({
							message:'请选择评价',
						});
	           		}
           		}else{
           			this.$toast({
						message:'请选择评价',
					});
           		}
           		
           		
           }
        },
    };

    const app = Vue.createApp(PatientData);

    app.use(vant);
    app.use(vant.Lazyload);

    app.mount("#app");
</script>

</html>